<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .dahezi {

            height: 100%;
            display: flex;

        }

        .dahezi .xuanxiang {
            width: 70%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;


        }

        .dahezi .xuanxiang .diyige {
            width: 200px;
            height: 370px;
        }

        .dahezi .xuanxiang .diyige img {
            width: 200px;
        }

        .dahezi .xuanxiang .diyige span {
            display: block;
            margin-left: 10px;
            margin-top: 10px;
        }

        .dahezi .xuanxiang .diyige button {
            margin-left: 10px;
            width: 100px;
            height: 30px;
            background-color: red;
            border: 1px solid transparent;
        }

        .gouwuche {
            width: 30%;
            height: 100%;
            /* display: none; */
        }

        .gouwuche h3 {
            margin-top: 10px;
            margin-left: 15px;
        }

        .gouwuche .xuanzhong {
            width: 100%;
            height: 100px;
            display: flex;
            margin-top: 10px;
        }

        .gouwuche .xuanzhong input {
            margin-left: 10px;
        }

        .gouwuche .xuanzhong img {
            height: 100px;
            margin-left: 20px;
        }

        .gouwuche .xuanzhong span {
            line-height: 100px;
            margin-left: 20px;
        }
        
    </style>
</head>

<body>
    <div class="dahezi">
        <div class="xuanxiang">
            <!-- <div class="diyige">
                <img src="./img/1.png" alt="">
                <span>高级版工艺</span>
                <span>100000</span>
                <button>加入购物车</button>
            </div> -->
        </div>
        <div class="gouwuche">
            <h3>购物车（）</h3>
            <div class="w123">

                <!-- <div class="xuanzhong">
                    <input type="checkbox">
                    <img src="./img/1.png" alt="">
                    <span>100</span>
                    <span>-</span>
                    <span>1</span>
                    <span>+</span>
                    <span>删除收藏</span> -->
            </div>
            <p>总价：</p>
        </div>
    </div>
    </div>
</body>

</html>
<script>
    class Gouwuche {
        constructor(e, data) {
            //获取大盒子的标签
            this.dom = document.querySelector(e)
            //arr的数据
            this.data = data
            //索引是0
            this.index = 0
            //创造一个空数组
            this.arr2 = { slsl: [] }
            //调用
            this.render()
            this.dianji()

        }
        //渲染左边的图片
        render() {
            var ster = this.data.map((item) => {
                return `<div class="diyige">
                <img src="${item.tupian}" alt="">
                <span>${item.name}</span>
                <span>${item.rmb}</span>
                <button>加入购物车</button>
            </div>`
            }).join('')
            //将数据渲染到选项中
            this.dom.querySelector('.xuanxiang').innerHTML = ster
        }
        //渲染右边的图片
        renderGouwuche() {
            var ster1 = this.arr2.slsl.map((item) => {
                return `  
                <div class="xuanzhong">
                <input type="checkbox">
                <img src="${item.tupian}" alt="">
                <span>${item.rmb}</span>
                <span class='jian'>-</span>
                <span>${item.cont}</span>
                <span class='jia'>+</span>
                <span class='shan'>删除收藏</span>
                </div>`
            }).join('')
            document.querySelector('.w123').innerHTML = ster1
            var cont = 0
            this.arr2.slsl.forEach((item) => {
                cont += item.cont
            })
            document.querySelector('h3').innerHTML = `购物车(${cont})`
            var price = this.arr2.slsl.reduce((s, item) => {
                return s + item.rmb * item.cont
            }, 0)
            console.log(price);
            document.querySelector('p').innerHTML = `总价${price}`

        }
        //点击事件
        dianji() {
            var xuanxiang = document.querySelector('.xuanxiang')

            xuanxiang.onclick = (e) => {

                //如果事件对象为按钮的时候
                if (e.target.tagName == 'BUTTON') {
                    //获取点击商品的下标
                    var buts = [...document.querySelectorAll('button')]
                    //
                    var index = buts.findIndex((item) => {
                        return item == e.target
                    })
                    // 添加商品到购物车
                    this.arr2.slsl.push(this.data[index]);
                    for (let i = 0; i < this.arr2.slsl.length; i++) {
                        for (let j = i + 1; j < this.arr2.slsl.length; j++) {
                            if (this.arr2.slsl[i].tupian == this.arr2.slsl[j].tupian) {
                                this.arr2.slsl[i].cont++
                                this.arr2.slsl.splice(j, 1)
                            }
                        }
                    }

                }
                this.renderGouwuche()
            }
            //购物车里面的点击加
            let gouwuche = this.dom.querySelector('.gouwuche')
            gouwuche.onclick = (e) => {
                if (e.target.className == 'jia') {
                    var jiahao = [...document.querySelectorAll('.jia')]
                    var index1 = jiahao.findIndex((item) => {
                        return item == e.target
                    })
                    let jia = this.arr2.slsl[index1].cont++
                }
                if (e.target.className == 'jian') {
                    var jianhao = [...document.querySelectorAll('.jian')]
                    var index2 = jianhao.findIndex((item) => {
                        return item == e.target
                    })
                    if (this.arr2.slsl[index2].cont > 1) {
                        this.arr2.slsl[index2].cont--
                    }
                }
                if (e.target.className == 'shan') {
                    var shanchu = [...document.querySelectorAll('.shan')]

                    var index3 = shanchu.findIndex((item) => {

                        return item == e.target
                    })
                    console.log(this.arr2.slsl[index3]);
                    this.arr2.slsl[index3].cont = 1
                    this.arr2.slsl.splice([index3], 1)
                }
                this.renderGouwuche()
            }
        }
    }
    //商品列表数据
    let arr = [
        { tupian: 'img/1.png', name: '高级按摩椅', rmb: '10000', but: '加入购物车', cont: 1 },
        { tupian: 'img/2.png', name: '按摩椅', rmb: '1000', but: '加入购物车', cont: 1 },
        { tupian: 'img/3.png', name: '高级按摩椅', rmb: '10900', but: '加入购物车', cont: 1 },
        { tupian: 'img/4.png', name: '高级按摩椅', rmb: '13000', but: '加入购物车', cont: 1 },
        { tupian: 'img/5.png', name: '高级按摩椅', rmb: '10100', but: '加入购物车', cont: 1 },
        { tupian: 'img/6.png', name: '高级按摩椅', rmb: '10', but: '加入购物车', cont: 1 },
        { tupian: 'img/7.png', name: '高级按摩椅', rmb: '100', but: '加入购物车', cont: 1 },
        { tupian: 'img/8.png', name: '高级按摩椅', rmb: '1020', but: '加入购物车', cont: 1 }
    ]
    //调用   
    new Gouwuche('.dahezi', arr)

</script>